<template>
  <div class="zudao-container">
    <h1 class="page-title">足道客户信息管理/修改足道客户</h1>

    <div class="operation-bar">
      <el-select v-model="searchType" placeholder="请选择查询类型" style="width: 180px; margin-right: 15px;">
        <el-option label="会员编号" value="id" />
        <el-option label="姓名" value="name" />
      </el-select>
      <el-input
        v-model="searchKeyword"
        placeholder="请输入查询内容"
        style="width: 240px; margin-right: 15px;"
        @keyup.enter.native="handleSearch"
      />
      <el-button @click="handleSearch" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="resetSearch" type="info" icon="el-icon-refresh">重置</el-button>
      <el-button @click="fetchCustomers" type="success" icon="el-icon-refresh">刷新数据</el-button>
    </div>

    <el-table
      :data="tableData"
      height="500"
      style="width: 100%"
      class="customer-table"
      stripe
      v-loading="loading"
    >
      <el-table-column prop="date" label="注册日期" width="180" align="center" />
      <el-table-column prop="id" label="会员编号" width="80" align="center" />
      <el-table-column prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="gender" label="性别" width="100" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.gender === '男' ? 'primary' : 'danger'">{{ row.gender }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="电话" width="150" align="center" />
      <el-table-column prop="level" label="足道水平" width="140" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getLevelTagType(row.level)">{{ row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="service" label="服务类型" width="200" align="center">
        <template slot-scope="{row}">
          <div class="service-display">
            <img :src="getServiceImage(row.service)" class="service-icon" />
            <span class="service-text">{{ row.service }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="showEditDialog" title="编辑足道客户" width="650px">
      <el-form :model="editForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册日期">
              <el-date-picker
                v-model="editForm.date"
                type="date"
                placeholder="选择注册日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员编号">
              <el-input v-model="editForm.id" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="editForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="editForm.gender" style="width: 100%">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input-number v-model="editForm.age" :min="0" :max="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="editForm.phone" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="足道水平">
          <el-select v-model="editForm.level" style="width=" 100%">
          <el-option v-for="item in levelOptions" :key="item.value"
                     :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务类型">
          <el-row :gutter="15">
            <el-col :span="8" v-for="service in serviceOptions" :key="service.value">
              <div
                class="service-option"
                @click="editForm.service = service.value"
                :class="{active: editForm.service === service.value}"
              >
                <img :src="service.image" class="option-icon" />
                <div class="option-label">{{ service.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确认修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ZudaoCustomerEdit',
  data() {
    return {
      searchType: 'id',
      searchKeyword: '',
      loading: false,
      showEditDialog: false,
      tableData: [],
      editForm: {
        id: 0,
        date: '',
        name: '',
        gender: '男',
        age: 0,
        phone: '',
        level: '初级',
        service: '足部按摩'
      },
      levelOptions: [
        { value: '初级', label: '初级' },
        { value: '中级', label: '中级' },
        { value: '高级', label: '高级' },
        { value: '专家级', label: '专家级' }
      ],
      serviceOptions: [

        { value: '足部按摩', label: '足部按摩', image: require('@/assets/foot_massage.jpg') },
        { value: '足底反射疗法', label: '足底反射疗法', image: require('@/assets/reflexology.jpg') },
        { value: '芳香疗法', label: '芳香疗法', image: require('@/assets/aromatherapy.jpg') },
        { value: '热石按摩', label: '热石按摩', image: require('@/assets/hot_stone.jpg') },
        { value: '全身按摩', label: '全身按摩', image:require('@/assets/full_body.jpg')}
      ]
    };
  },
  methods: {
    async fetchCustomers() {
      try {
        this.loading = true;
        const res = await axios.get('/api/zudao/listzudao');
        this.tableData = res.data.data;
        this.$message.success('数据加载成功');
      } catch (error) {
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    },
    async handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.fetchCustomers();
        return;
      }

      try {
        this.loading = true;

        const params = {};

        if (this.searchType === 'id') {
          const idNumber = parseInt(this.searchKeyword, 10);
          if (isNaN(idNumber)) {
            this.$message.warning('会员编号必须是数字');
            return;
          }
          params.id = idNumber;
        } else {
          params.name = this.searchKeyword;
        }

        const response = await axios.get('/api/zudao/searchzudao', { params });

        if (response.data.code === 200) {
          this.tableData = response.data.data || [];
          if (this.tableData.length === 0) {
            this.$message.warning('未找到匹配的客户');
          }
        } else {
          this.$message.error(response.data.message || '搜索失败');
        }
      } catch (error) {
        this.$message.error('搜索过程中出错');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    resetSearch() {
      this.searchType = 'id';
      this.searchKeyword = '';
      this.fetchCustomers();
    },
    handleEdit(row) {
      this.editForm = { ...row };
      this.showEditDialog = true;
    },
    async submitEdit() {
      try {
        this.loading = true;

        const params = {
          id: this.editForm.id,
          date: this.editForm.date || new Date().toISOString().split('T')[0],
          name: this.editForm.name,
          gender: this.editForm.gender,
          age: this.editForm.age,
          phone: this.editForm.phone,
          level: this.editForm.level,
          service: this.editForm.service
        }

        const response = await axios.put(`/api/zudao/alterzudao/${this.editForm.id}`, params);

        if (response.data.code === 200) {
          this.$message.success('修改成功');
          this.showEditDialog = false;
          this.fetchCustomers();
        } else {
          this.$message.error(response.data.message || '修改失败');
        }
      } catch (error) {
        this.$message.error('修改过程中出错');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    getLevelTagType(level) {
      const map = {
        '初级': 'info',
        '中级': '',
        '高级': 'warning',
        '专家级': 'success'
      };
      return map[level] || '';
    },
    getServiceImage(service) {
      const map = {
        '足部按摩':   require('@/assets/foot_massage.jpg'), // 路径修正
        '足底反射疗法': require('@/assets/reflexology.jpg'),
        '芳香疗法': require('@/assets/aromatherapy.jpg'),
        '热身按摩`': require('@/assets/hot_stone.jpg'),
        '全身按摩': require('@/assets/full_body.jpg')

      };
      return map[service] || '';
    }
  },
  mounted() {
    this.fetchCustomers();
  }
};
</script>

<style scoped>
.zudao-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.customer-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.service-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.service-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  object-fit: contain;
}

.service-text {
  font-size: 14px;
}

.service-option {
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.service-option:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.service-option.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.option-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
  object-fit: contain;
}

.option-label {
  font-size: 14px;
  color: #606266;
}
</style>
